<template>
  <div>
    <el-dialog center class="global-dialog" v-model="dialogVisableXq" width="800px" top="10vh" :show-close="true"
      :close-on-click-modal="false" @close="close" destroy-on-close>
      <template #title>
        <div class="my-header" v-loading="detail_loading">
          <el-tabs v-model="tabId" class="demo-tabs">
            <el-tab-pane label="基本信息" name="1">
              <el-form :model="diaForm" ref="DiaForm" :rules="rules" status-icon label-width="130px" status>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="成果名称" prop="name">
                      <el-input placeholder="请输入" v-model="diaForm.name" style="width: 100%" :disabled="1" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="中咨排序" prop="sort">
                      <el-input type="number" min="0" placeholder="请输入" v-model="diaForm.sort" style="width: 100%"  :disabled="1" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="评价级别" prop="levelId">
                      <el-select clearable v-model="diaForm.levelId" placeholder="评价级别" @change="changeCommentLevel"
                        style="width: 100%" :disabled="1" >
                        <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
                          v-for="item in commentLevelList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="评价主体及形式" prop="themeFormId">
                      <el-select clearable v-model="diaForm.themeFormId" placeholder="评价主体及形式" @change="changeTheme"
                        style="width: 100%"  :disabled="1" >
                        <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
                          v-for="item in methodType" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="企业排名" prop="rankId">
                      <el-select clearable v-model="diaForm.rankId" placeholder="企业排名" @change="changeRank"
                        style="width: 100%" :disabled="1" >
                        <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemText"
                          v-for="item in rankList" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="完成单位" prop="unitName">

                      <popup-tree-input :data="orgAllList" :props="popupTreeProps" :prop="deptForm.parentName == null
                          ? $t('message.org.top_menu')
                          : diaForm.unitName
                        " :node-key="'' + deptForm.parentId" :current-change-handle="changeUnit" :disabled="1"  />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="评价批准日期" prop="approvalDate">
                      <el-date-picker v-model="diaForm.approvalDate" type="date" value-format="YYYY-MM-DD"
                        placeholder="请选择" clearable style="width: 100%"  :disabled="1" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="组织评价单位" prop="evaluateUnit">

                      <popup-tree-input :data="orgAllList" :props="popupTreeProps" :prop="deptForm.parentName == null
                          ? $t('message.org.top_menu')
                          : diaForm.evaluateUnit
                        " :node-key="'' + deptForm.parentId" :current-change-handle="changEvaluateUnit" :disabled="1"  />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="评价日期" prop="evaluateDate">
                      <el-date-picker v-model="diaForm.evaluateDate" type="date" value-format="YYYY-MM-DD"
                        placeholder="请选择" clearable style="width: 100%"  :disabled="1" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="内容简介" prop="briefIntroduct">
                  <el-input v-model="diaForm.briefIntroduct" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea"
                    placeholder="请输入"  :disabled="1" />
                </el-form-item>
                <el-form-item label="评价意见" prop="renark">
                  <el-input v-model="diaForm.renark" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea"
                    placeholder="请输入" :disabled="1"  />
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="2">
              <PlatformFiles :files="files" @filesParams="filesParams"  download="KJSL:KJCG:CGPJ:DOWNLOAD"  upload="KJSL:KJCG:CGPJ:UPLOAD" fileDelete="KJSL:KJCG:CGPJ:FILEDELET"></PlatformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="3" v-if="id">
              <Record :changeLogs="changeLogs"></Record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">关闭</el-button>
<!--          <el-button type="primary" @click="save">保存</el-button>-->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
addForm,
editForm,
getDetailById,
getDictionary
} from '@/views/science/api/assessmen';
import PopupTreeInput from '@/views/science/components/PopupTreeInput/index.vue';
import PlatformFiles from '@/views/science/components/platformFiles/platformFilesxq.vue';
import Record from '@/views/science/components/record/record.vue';
import { tips } from '@/views/science/components/tips/tips';
import { onMounted, reactive, ref, toRefs, watch } from 'vue';

export default {
  components: {
    PlatformFiles,
    Record,
    PopupTreeInput
  },
  props: {
    dialogVisableXq: {
      type: Boolean,
      default: false,
    },
    orgAllList: {
      type: Array,
      required: true,
    },

    // falg  1:新增  2:编辑  3:详情
    flag: {
      type: String,
      default: 1,
    },
    id: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    watch(
      () => props.id,

      () => {
        // 深度监听.只有在id存在的时候调用详情的接口
        if (props.id && props.flag === 3) {
          getDetail(props.id)
        }
      },

      { deep: true, immediate: true }
    )

    // 发送请求
    onMounted(() => {
      // 获取数据字典

      getCodeList()
    })

    let DiaForm = ref()
    let data = reactive({
      detail_loading:false,
      popupTreeProps: {
        label: 'name',
        children: 'children',
        value: 'id',
        checkStrictly: true,
      },
      deptForm: {
        parentId: 0,
        parentName: '',
      },
      tabId: '1',

      commentLevelList: [], //评价等级
      methodType: [], //评价主体及形式
      rankList: [], //企业排名

      unitNameList: [], //维护单位
      workerList: [], //桌著作人
      projectList: [], //项目
      technologyList: [], //技术分类
      awardList: [], //软著状态

      diaForm: {
        id: '',
        name: '',
        levelId: '',
        level: '',
        themeFormId: '',
        themeForm: '',
        sort: '',
        rankId: '',
        unitId: '',
        unitName: '',
        evaluateUnitId: '',
        evaluateUnit: '',
        evaluateDate: '',
        briefIntroduct: '',
        renark: '',
      },

      files: [],

      changeLogs: [],
    })

    // 规则校验
    let rules = reactive({
      name: [{ required: true, message: '请输入成果名称', trigger: 'blur' }],
      levelId: [{ required: true, message: '请选择评价级别', trigger: 'change' }],
      themeFormId: [{ required: true, message: '请选择评价主题及形式', trigger: 'change' }],
      sort: [{ required: true, message: '请输入排序', trigger: 'change' }],
      rankId: [{ required: true, message: '请选择企业排名', trigger: 'change' }],

      unitName: [{ required: true, message: '请选择完成单位', trigger: 'change' }],
      approvalDate: [{ required: true, message: '请选择评价批准日期', trigger: 'change' }],
      evaluateUnit: [{ required: true, message: '请选择组织评价单位', trigger: 'change' }],
      evaluateDate: [{ required: true, message: '请选择评价日期', trigger: 'change' }],
    })
    // 保存
    let save = () => {
      DiaForm.value.validate((valid) => {
        // 校验通过
        if (valid) {
          //flag 1 新增  2 编辑  3  详情
          if (props.flag == 1) {
            data.diaForm.id = ''

            addForm({
              baseInfo: data.diaForm,
              fileList: data.files,
            }).then(() => {
              tips('新增成功', 'success')

              DiaForm.value.resetFields()

              emit('changeDialog', '1')
            })
          } else {
            editForm({
              baseInfo: data.diaForm,

              fileList: data.files,
            }).then(() => {
              tips('编辑成功', 'success')

              DiaForm.value.resetFields()

              emit('changeDialog', '1')
            })
          }
        } else {
          return tips('请将基本信息补充完整', 'warning')
        }
      })
    }

    let filesParams = (params) => {
      data.files = params
    }

    // 评价级别
    let changeCommentLevel = (id) => {
      let itemText = data.commentLevelList.find((item) => item.itemValue == id).itemText
      let arrList = data.commentLevelList.find((item) => item.itemValue == id).children

      if (arrList.length > 0) {
        data.methodType = arrList || []
      }
      data.diaForm.level = itemText
      data.diaForm.levelId = id
      data.diaForm.themeForm = ''
      data.diaForm.themeFormId = ''
    }


    //企业排名change
    const changeRank = (item) => {
      // console.log('企业排名change',item,data.rankList);
      data.rankList.forEach(e => {
        if (e.itemValue == item) {
          data.diaForm.rankName = e.itemText
        }
      })
    }
    // 评价主体及形式
    let changeTheme = (id) => {
      let itemText = data.methodType.find((item) => item.itemValue == id).itemText
      data.diaForm.themeForm = itemText
      data.diaForm.themeFormId = id
    }

    // 完成单位
    let changeUnit = (item) => {
      data.diaForm.unitId=item.id
      data.diaForm.unitName=item.name
    }

    // 组织单位
    let changEvaluateUnit = (item) => {

      data.diaForm.evaluateUnitId = item.id
      data.diaForm.evaluateUnit = item.name
    }

    let changeState = (id) => {
      let itemText = data.awardList.find((item) => item.itemValue == id).itemText

      data.diaForm.softState = itemText
    }

    let changeType = (id) => {
      let itemText = data.technologyList.find((item) => item.itemValue == id).itemText

      data.diaForm.techClass = itemText
    }

    let changeWorker = (id) => {
      let itemText = data.workerList.find((item) => item.userId == id).username

      data.diaForm.copyOwner = itemText
    }

    // 通过详情查询id

    let getDetail = async (id) => {
      data.detail_loading = true
      let res = await getDetailById(id)

      data.diaForm = res.data.data.info
      // changeCommentLevel(data.diaForm.levelId)
      if(data.diaForm.levelId){
        let arrList = data.commentLevelList.find((item) => item.itemValue == data.diaForm.levelId).children
        if (arrList.length > 0) {
          data.methodType = arrList || []
        }
      }

      data.files = res.data.data.files

      data.changeLogs = res.data.data.changeLogs
      data.detail_loading = false
    }

    // 评价等级===>数据字典

    let getCodeList = () => {
      getDictionary(['KJSL_EVALUATION_LEVEL_EVALUATION_SUBJECT', 'KJSL_ENTERPRISE_RANKING']).then(
        (res) => {
          data.commentLevelList = res.data.data.KJSL_EVALUATION_LEVEL_EVALUATION_SUBJECT // 评价等级
          console.log('commentLevelList', data.commentLevelList);
          data.rankList = res.data.data.KJSL_ENTERPRISE_RANKING // 企业排名
        }
      )
    }

    // // 单位
    // let getUnitList = () => {
    //   getUnitInfo({}).then((res) => {
    //     data.unitNameList = res.data.data
    //   })
    // }

    // 关闭清除对话框里面的数据,附件.变更记录也要删除

    // 关闭清除对话框里面的数据,附件.变更记录也要删除
    // tabId也要设置初始值,否则在电点击编辑record,新增打开会出现空白页

    let close = () => {
      data.tabId = "1";
      DiaForm.value.resetFields();
      emit("changeDialogxq");


    }

    return {
      DiaForm,
      filesParams,
      rules,

      changeCommentLevel,
      changeTheme,
      changEvaluateUnit,
      changeState,
      changeType,
      changeUnit,
      changeWorker,
      getCodeList,
      ...toRefs(data),
      close,
      save,
      changeRank,
    }
  },
}
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: end;
}

:deep(.el-dialog__body) {
  display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>
